<template>
    <div class="content-box">
        <div class="friend-handler" v-show="isFlag === 1">
            <svg-icon icon-class="user-list" size="0.5rem"></svg-icon>
            <n-button @click="isFlag = 2" class="button" text>
                <div class="title-l">约友列表</div>
            </n-button>
        </div>
        <div class="friend-handler" v-show="isFlag === 2">
            <svg-icon icon-class="new-friend" size="0.5rem"></svg-icon>
            <n-button @click="isFlag = 3" class="button" text>
                <div class="title-f">新的约起</div>
            </n-button>
        </div>
        <div class="friend-handler" v-show="isFlag === 3">
            <svg-icon icon-class="group-list" size="0.5rem"></svg-icon>
            <n-button @click="isFlag = 1" class="button" text>
                <div class="title-g">群聊列表</div>
            </n-button>
        </div>
        <div v-show="isFlag === 1" class="friend-content">
            <ul>
                <draggable v-model="friendList" :animation="300" @start="onStart" @end="onEnd" :handle="'.mover'">
                    <transition-group>
                        <li v-for="item in friendList" :key="item.id">
                            <div class="user-item">
                                <img v-if="item.friendAvatar" class="user-avatar mover" :src="item.friendAvatar"
                                     alt="author"/>
                                <img v-else class="user-avatar mover" src="@/assets/images/user/default-author.png"
                                     alt="author"/>
                                <div class="user-info">
                                    <n-ellipsis style="max-width: 2.3rem">
                                        <span class="user-name">{{ item.friendRemark }}</span>
                                        <template #tooltip>
                                            <div style="text-align: center">
                                                {{ item.friendRemark }}
                                            </div>
                                        </template>
                                    </n-ellipsis>
                                </div>
                                <div class="user-time">
                                    最近登录于 {{ formatDateTimeNotS(item.loginTime) }}
                                </div>
                                <div class="button-box">
                                    <n-button style="width: 0.9rem" size="tiny" type="info"
                                              @click="handelSingeChat(item)">
                                        <span style="color: var(--text-color)">发消息</span>
                                    </n-button>
                                    <n-button style="width: 0.8rem; margin-left: 0.1rem;" size="tiny" type="error"
                                              @click="deleteF(item.friendId)">
                                        <span style="color: var(--text-color)">删除</span>
                                    </n-button>
                                </div>
                            </div>
                        </li>
                    </transition-group>
                </draggable>
            </ul>
        </div>
        <div v-show="isFlag === 2" class="list-box">
            <AgreeRequest></AgreeRequest>
        </div>
        <div v-show="isFlag === 3" class="list-box">
            <AgreeGroup></AgreeGroup>
        </div>
    </div>
</template>
<script setup lang="ts">
import useStore from "@/store"
import {FriendDTO, FriendListVO} from "@/api/friend/types";
import {deleteFriend, getUserFriend} from "@/api/friend";
import {arrUnique, formatDateTimeNotS} from "@/utils/date";
import {getRecentFriendIds, saveRecentFriendId} from "@/utils/localStorage";
import {ConversationData} from "@/model/chat";

const {user, chat} = useStore();

const friendList = ref([] as FriendListVO[])

const data = reactive({
    drag: false,
    isFlag: 1,
    friendDTO: {
        roomId: '',
        userId: user.id,
        friendId: 0
    } as FriendDTO,
})

const {drag, isFlag, friendDTO} = toRefs(data)
const onStart = () => {
    drag.value = true;
}
const onEnd = () => {
    drag.value = false;
}

/**
 * 开始单聊,将键值(recent-friend: friendId)存入浏览器缓存，作为最近聊天
 */
const handelSingeChat = async (friend: FriendListVO) => {
    const recentFriendIds = arrUnique(getRecentFriendIds().split(',')).filter((item: string) => item);
    console.log("本地好友id列表为：", recentFriendIds);
    saveRecentFriendId(friend.friendId.toString());
    // 设置历史消息（是分页数据，设置最后一页的数据）
    await chat.setCurrentConversation(friend.roomId, {
        type: 1,
        name: friend.friendRemark,
        img: friend.friendAvatar,
        uniqueMark: friend.friendId,
    } as ConversationData);
    // 开启聊天框
    chat.chatType = 1;
}

const getFriend = () => {
    getUserFriend().then(({data}) => {
        console.log(data)
        if (data.flag) {
            friendList.value = data.data;
        }
    })
}

/**
 * 删除好友
 * @param friendId 好友id
 */
const deleteF = (friendId: number) => {
    if (user.id !== undefined) {
        window.$dialog?.warning({
            title: '警告',
            content: 'Are you sure？',
            positiveText: 'Yes',
            negativeText: 'No',
            onPositiveClick: () => {
                friendDTO.value.roomId = user.id + '_' + friendId;
                friendDTO.value.friendId = friendId;
                deleteFriend(friendDTO.value).then(({data}) => {
                    if (data.flag) {
                        window.$message?.success(data.msg);
                        getFriend();
                    }
                });
            },
            onNegativeClick: () => {
                window.$message?.success('我就知道,你还是爱我的');
            }
        })
    }
}

onMounted(() => {
    if (user.id !== undefined) {
        getFriend();
    }
})
</script>

<style scoped lang="scss">

.content-box {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  padding: 0.1rem;

  .friend-handler {
    width: 2.4rem;
    box-shadow: 0 0.05rem 0.01rem rgba(0, 0, 0, .1);
    margin: 0.2rem auto;

    button {
      position: relative;
      top: -0.1rem;
      left: 0.2rem;
    }

    .title-l {
      font-weight: bold;
      font-size: 0.4rem;
      color: var(--main-1-h8);

      &:hover {
        color: #fd8a38;
      }
    }

    .title-f {
      font-weight: bold;
      font-size: 0.4rem;
      color: var(--main-1-h8);

      &:hover {
        color: #009fe7;
      }
    }

    .title-g {
      font-weight: bold;
      font-size: 0.4rem;
      color: var(--main-1-h8);

      &:hover {
        color: #13ce66;
      }
    }
  }

  .friend-content {
    color: var(--main-2-h8);

    .title {
      font-size: 1.4em;
      font-weight: bold;
      text-align: center;
      margin: 0.2rem 0;
    }

    .user-item {
      position: relative;
      width: 100%;
      height: 1.3rem;
      margin-top: 0.1rem;

      &:hover {
        border-radius: 0.1rem;
        box-shadow: 0 0 0.2rem var(--box-shadow-c);
      }

      .user-avatar {
        width: 0.8rem;
        height: 0.8rem;
        position: absolute;
        top: 0.1rem;
        left: 0.1rem;

      }

      .user-info {
        max-width: calc(100% - 3.4rem);
        height: 0.6rem;
        position: absolute;
        top: 0.2rem;
        left: 1.1rem;
        font-weight: bold;
        border-radius: 0.2rem;
        box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);

        .user-name {
          font-weight: bold;
          font-size: 0.3rem;
          line-height: 0.6rem;
          margin: 0 0.1rem;
          color: var(--main-1);
        }

        .end-msg {
          position: absolute;
          top: 0.4rem;
          left: 0;
        }
      }

      .user-time {
        width: 2.4rem;
        position: absolute;
        top: 0;
        right: 0.1rem;
        text-align: right;
        font-size: 0.2rem;
      }

      .button-box {
        position: absolute;
        bottom: 0.1rem;
        right: 0.1rem;
      }
    }
  }
}
</style>
